<template>
	<view>
		<view style="text-align: center;">
		<image mode="widthFix" class="logo" :src="mode.isDayTime?'/static/logo.png':'/static/logo_moon.png'">
		</image>
		<view :style="'display: inline;font-size: 20rpx;'
		+(mode.isDayTime?'color:#8a8a8a;':'color:#f0f0f0;')
		">搜索记录</view>
		</view>
		
		<view style="height: 10rpx;"></view>
		
		<view style="padding: 0 40rpx 40rpx 40rpx;">
			<u-search v-model="searchKeyword" :action-style="{
				 'fontSize':'0rpx',
				 'width':'0rpx'
			 }" :focus="true" style="
			 box-shadow:0 4rpx 10rpx rgba(118,118,118,.3);
			 border-radius: 50rpx;
			 " :color="mode.isDayTime?'#8a8a8a':'#f0f0f0'" :search-icon-color="'rgb(154, 160, 166)'"
				:bg-color="mode.isDayTime?'#FFFFFF':'#202124'" input-align="center" height="80">
			</u-search>
			<view 	v-if="searchKeywords!=null&&searchKeywords.length>0">
				<view style="height: 15rpx;"></view>
			</view>
		</view>

		<view class="split-line" :style="
		mode.isDayTime?
		'box-shadow: 0 0 30rpx #f1f1f1 inset;':
		'box-shadow: 0 0 30rpx #000000 inset;'
		">
		</view>
		
		<view :style="'padding: 30rpx 30rpx 10rpx 30rpx;'+
		(mode.isDayTime?'color:#333333;':'color:#f0f0f0;')
		">
			<view class="body-data-box"
			 v-show="JSON.stringify(item).indexOf(searchKeyword)!=-1"
			 :style="
			 mode.isDayTime?
				'box-shadow: 0 5rpx 10rpx rgba(118,118,118,.2);':
				'box-shadow: 0 5rpx 10rpx rgba(118,118,118,.2);background-color:#202124'
			 " v-for="(item,index) in bodyData.content">
				<view>
					<view style="display: inline;font-weight: bold;">搜索词</view>
					<view style="display: inline;margin-left: 20rpx;font-weight: 300;">{{item.keyword}}</view>
				</view>
				<view style="height: 10rpx;"></view>
				<view>
					<view style="display: inline;font-weight: bold;">系统自添关键词:</view>
					<view style="display: inline;margin-left: 20rpx;font-weight: 300;">
						<view style="display: inline;" v-for="(item1,index1) in item.searchKeywords">
							{{item1.name}}
							<view style="display: inline;">、</view>
							<view style="display: inline;" v-for="(item2,index2) in item1.keywordIns">
								<view style="display: inline;margin-left: 10rpx;">{{item2.searchName}}</view>
								<view style="display: inline;">；</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="height: 10rpx;"></view>
				<view style="
				text-align: right;
				font-weight: 100;font-size: 20rpx;">{{item.gmtCreate}}</view>
			</view>
			<view style="height: 20rpx;"></view>
			
			
			<view style="height: 50rpx;"></view>
		</view>
		
	</view>
</template>

<script>
	import Request from '../../utils/Request.js'
	import Api from '../../utils/Api.js'

	export default {
		props: ['mode'],
		data() {
			return {
				bodyData: {},
				requestParam: {
					"pageNumber": 1,
					"pageSize": 99,
					"data": {
						userId:null
					}
				},
				searchKeyword:"",
				searchKeywordIns: [],
				searchKeywords: []
			}
		},
		mounted() {
			this.searchKeyword="";
			this.findMine();
		},
		onLoad() {
			
		},
		methods: {
			getSearchKeywordIns() {
				// alert(Api.search.getSearchKeywordIns);
				Request.request(this, {
					url: Api.search.getSearchKeywordIns,
					data: {
						"keyword": this.requestParam.data
					},
					success: (res) => {
						this.searchKeywordIns = res.data.data;
						this.searchKeywords = [];
						for (var i = 0; i < this.searchKeywordIns.length; i++) {
							var item = this.searchKeywordIns[i];
							this.searchKeywords.push(item.name);
							for (var j = 0; j < item.keywordIns.length; i++) {
								var item1 = item.keywordIns[i];
								this.searchKeywords.push(item1.searchName);
							}

						}
					}
				})
			},
			findMine() {
				// alert(123);
				Request.request(this, {
					url: Api.searchHistory.findMine,
					data: this.requestParam,
					success: (res) => {
						this.bodyData = res.data.data;
						this.$forceUpdate();
					}
				})
			},
			searchInput() {
				this.$forceUpdate();
			},
			highlight(words, text) {
				var arr = [];
				for (var i = 0; i < words.length; i++) {
					var item = words[i];
					var indexOf = text.indexOf(item);
					if (indexOf != -1) {
						for (var j = indexOf; j < indexOf + item.length; j++) {
							arr.push(j);
						}
					}
				}
				return arr;
			},
			open(href) {
				window.open(href);
			}
		}
	}
</script>

<style scoped>
	.logo {
		position: relative;
		width: 300rpx;
	}

	.split-line {
		width: 100%;
		height: 10rpx;
		background-color: #F1F1F1;
	}

	.body-data-box {
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.body-data-title {
		font-size: 35rpx;
	}

	.body-data-content {
		font-size: 20rpx;
		margin: 0;
		padding: 0;
		font-weight: lighter;
	}
	
	.page-text{
		display: inline;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		line-height: 100rpx;
	}
</style>
